<template>
  <div class="rate-container" v-if="rate!= null">

    <div class="rate-nav">
      <span>用户评价</span>
      <span>更多</span>
    </div>

    <van-divider/>

    <div class="rate-content">
      <div class="title">
        <van-image width="30" :src="rate.avatar"></van-image>
        <div class="name">{{rate.uname}}</div>
      </div>
      <div class="main">{{rate.content}}</div>
      <div class="other">
        <div>{{rate.created}}</div>
        <div>{{rate.style}}</div>
      </div>
      <div class="img" v-if="rate.images != null">
        <van-image fit="cover" style="margin-right: 10px" width="80" height="80" v-for="(item,index) of rate.images"
                   :key="index"
                   :src="item"></van-image>
      </div>
    </div>

    <van-divider/>

  </div>
</template>

<script>
  export default {
    name: "DetailRate",
    props: {
      rate: {
        type: Object,
        default() {
          return {};
        }
      }
    }
  }
</script>

<style scoped>
  .rate-container {
    padding: 0 12px;
  }

  .rate-nav {
    display: flex;
    justify-content: space-between;
    color: black;
    font-size: 15px;
  }

  .rate-content .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .rate-content .title .name {
    margin-left: 30px;

  }

  .rate-content .main {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #888888;
  }

  .rate-content .other {
    font-size: 14px;
    color: #888888;
    display: flex;
    margin-bottom: 10px;
  }

  .rate-content .other :first-child {
    margin-right: 18px;
  }


</style>
